<template>
	<div class="app-container">
		<div class="dis">
			<div>
				<div class="hei20 foSi12" style="color: #838383;">充值时间</div>
				<el-date-picker v-model="birthday_start" style="width: 140px" size="small" type="date"
					placeholder="开始时间" />
				<el-date-picker v-model="birthday_end" class="mar-left10" style="width: 140px;" size="small"
					type="date" placeholder="截至日期" />
			</div>
			<div class="mar-left10">
				<div class="foSi12 hei20" style="color: #838383;">充值人</div>
				<el-input v-model="name"  size="small" style="width: 140px;" placeholder="充值人" />
			</div>
			<div class="mar-left10">
				<el-button type="primary" size="small" class="mar-top20 bac6b7"
					@click.stop="suosouClick()">搜索</el-button>
			</div>
		</div>
		<div class="mar-top20 mar-bott20">您当前电子合同剩余可签署<span style="color:#6b7cdd">0</span>份</div>
		<el-table ref="singleTable" class="wid100 mar-top20" v-loading="listLoading" stripe :data="list" highlight-current-row>
			<div slot="empty" class="m-empty-box">
				<div class="mar" style="width: 168px;height: 180px;">
					<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
				</div>
				<div class="title">暂无数据</div>
			</div>
			<el-table-column prop="contract_menu_title" label="充值套餐" />
			<el-table-column prop="contract_num" label="合同份数" />
			<el-table-column prop="price" label="支付金额" />
			<el-table-column prop="paytype_text" label="支付类型" />
			<el-table-column prop="status_text" label="支付状态" />
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
			@pagination="getList" />
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		getPayRecord
	} from '@/api/contract'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	export default {
		name: 'contractRechargeRecord',
		components: {
			Pagination
		},
		data() {
			return {
				name:null,
				birthday_start: null,
				birthday_end: null,
				list: null,
				total: 0,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 20
				}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '充值记录',
				url: '/contract/contractRechargeRecord',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			suosouClick(){
				this.listQuery.page = 1
				this.getList()
			},
			getList() {
				this.listLoading = true
				getPayRecord({}).then(response => {
					const {
						data
					} = response
					this.total = data.total
					this.list = data.data
					this.listLoading = false
				}).catch(error => {
					this.listLoading = false
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
	.app-container {
		font-size: 14px;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	::v-deep .el-input__inner {
		height: 36px;
	}

	/* ::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #616b74
} */
	.m-content-box {
		position: relative;
		padding: 30px 63px;
	}

	.contract-initiate {
		width: 878px;
		margin: 0 auto;
	}

	.contract-initiate__hd {
		padding-top: 90px;
		text-align: center;
	}

	.contract-initiate__desc {
		display: flex;
		margin-top: 80px;
		justify-content: space-between;
	}

	.contract-initiate__hd-title {
		margin-bottom: 16px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
	}

	.contract-initiate__hd-sub-title {
		margin-bottom: 40px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
	}

	.contract-initiate__hd-btns {
		display: flex;
		justify-content: center;
	}

	.contract-initiate__desc-item {
		width: 200px;
		height: 292px;
		background: #ffffff;
		box-shadow: 0 2px 6px 5px rgba(242, 242, 242, .5);
		border-radius: 10px;
		box-sizing: border-box;
		text-align: center;
	}

	.contract-initiate__desc-icon {
		padding-top: 32px;
		line-height: 1;
	}

	.contract-initiate__desc-title {
		margin: 36px 0 24px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1;
	}

	.contract-initiate__desc-content {
		height: 26px;
		line-height: 1;
		color: #787878;
	}
</style>